<template>
	<view class="">
		<view class="item bgw">
			<view class="flex">
				<template v-for="col in table">
					<!-- <view class="col-item" :style="[col.style]" v-if="col.key == 'purchase_unit_qty'">
						<input v-model="value" type="number" placeholder="请输入" @blur="value_blur" @input="value_input" :maxlength="6" class="input_border_bottom"/>
					</view> -->
					<view class="col-item" :style="[col.style]" v-if="col.key == 'purchase_unit_qty'">
						<input v-model="detail.purchase_unit_qty" type="number" placeholder="请输入" :maxlength="8"
							class="input_border_bottom" @input="value_input" @blur="value_blur"
							data-name="purchase_unit_qty" />
					</view>
					<view class="col-item" :style="[col.style]" v-else-if="col.key == 'purchase_unit_price'">
						<input v-model="detail.purchase_unit_price" type="number" placeholder="请输入" :maxlength="8"
							class="input_border_bottom" @input="value_input" @blur="value_blur"
							data-name="purchase_unit_price" />
					</view>
					<view class="col-item" :style="[col.style]" v-else-if="col.key == 'purchase_unit_id'">
						<picker @change="bind_purchase_unit_change" :value="purchase_unit_index" :range="unit"
							range-key="label">
							<view class="flex input_border_bottom">
								<view class="flex-1">
									{{unit[purchase_unit_index].label}}
								</view>
								<view class="ml5">
									<u-icon name="arrow-down" color="#999999" size="14"></u-icon>
								</view>
							</view>
						</picker>
					</view>
					<view class="col-item" :style="[col.style]" v-else-if="col.key == 'price'">
						{{price}}
					</view>
					<view class="col-item" :style="[col.style]" v-else-if="col.key == 'mname'">
						<slot name="mname"></slot>
					</view>
					<view class="col-item" :style="[col.style]" v-else>
						{{detail[col.key]}}
					</view>
				</template>
			</view>
			<u-line></u-line>
			<view class="flex">
				
				<!-- <view class="text-gray mr15 col-item label-item">
					入库方式
				</view> -->
				<view class="col-item flex-1">
					<input v-model="detail.cash_amount" type="number" placeholder="请输入已付" :maxlength="8" class="" @input="value_input" @blur="value_blur" data-name="cash_amount" style="font-size: 28upx;"/>
				</view>
				<view class="col-item flex-1">
					<picker @change="bind_picker_change" :value="picker_index" :range="picker_array" range-key="label">
						<view class="flex">
							<view class="flex-1">
								{{picker_array[picker_index].label}}
							</view>
							<view class="ml5">
								<u-icon name="arrow-down" color="#999999" size="14"></u-icon>
							</view>
						</view>
					</picker>
				</view>
				<view class="col-item" v-if="!msupplier_id">
					<slot name="msupplier_id"></slot>
				</view>
			</view>
			<u-line></u-line>
			<view class="flex" style="justify-content: space-between;">
				<view class="col-item" style="width: 140px;">
					<picker @change="bind_date_change" :value="date_index" range-key="label" mode="date" :start="startDate" :end="endDate" >
						<view class="flex">
							<view class="flex-1">
								{{detail.date || '请选择'}}
							</view>
							<view class="ml5">
								<u-icon name="arrow-down" color="#999999" size="14"></u-icon>
							</view>
						</view>
					</picker>
				</view>
				<view class="col-item">
					<view class="flex" style="justify-content: center;" @click="close">
						<u-button type="error" size="mini" text="关闭"></u-button>
					</view>
				</view>
			</view>
			<!--<view class="flex">
				<view class="flex flex-1" style="justify-content: center;">
					<view class="col-item">
						<view class="flex" style="justify-content: center;" @click="del">
							<u-button type="warning" size="mini" text="删除"></u-button>
						</view>
					</view>
					<view class="col-item">
						<view class="flex" style="justify-content: center;" @click="close">
							<u-button type="error" size="mini" text="关闭"></u-button>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="flex" v-if="msupplier_id">
				<view class="text-gray mr15 col-item label-item">
					需求日期
				</view>
				<view class="col-item flex-1">
					:start="startDate" :end="endDate"
					<picker mode="date" :value="detail.need_date" @change="bind_date_change">
						<view class="flex">
							<view class="flex-1" v-if="detail.need_date">
								{{detail.need_date}}
							</view>
							<view class="flex-1 text-light-gray" v-else>
								请选择
							</view>
							<view class="ml5">
								<u-icon name="arrow-down" color="#999999" size="14"></u-icon>
							</view>
						</view>
					</picker>
				</view>
			</view> -->
			<u-line></u-line>
		</view>
		<view class="blank20"></view>
	</view>
</template>

<script>
	const formatPrice = (price) => {
		price = '' + price;
		price = price
			.replace(/\s*/g, "") //去除字符串内所有的空格
			.replace(/[^\-\d.]/g, '') // 清除“-”“数字”和“.”以外的字符
			.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
			.replace('.', '$#$')
			.replace(/\./g, '')
			.replace('$#$', '.')
			.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两个小数
		// if (price.indexOf('.') < 0 && price != '') {
		//     // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
		//     price = parseFloat(price);
		// }
		// if (price[0] == '0' && price != '') {
		//     // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
		//     price = parseFloat(price);
		// }
		if (price != '') {
			price = Number(price);
		}
		return price;
	};
	import {
		one_day_kpi_report_detail,
		save_one_day_sales_cost_detail,
		update_cost_report_data,
		common_write,
		common_create,
		common_delete
	} from '@/common/api.js';
	export default {
		name: "item",
		props: {
			detail: Object,
			table: Array,
			// msupplier: Array,
			unit: Array,
			msupplier_id: Number
		},
		data() {
			return {
				purchase_unit_index: 0,
				msupplier_index: 0,
				picker_index: 0,
				picker_array: [{
						label: '即入即出',
						id: 'stock_in_out'
					},
					{
						label: '入库',
						id: 'stock_in'
					},
				],
				picker_obj: {
					'stock_in_out': '即入即出',
					'stock_in': '入库',
				},
				value: 1,
				loading: false,
				price:0,
				startDate:'',
				endDate:'',
				date_index:0

			};
		},
		watch: {
			detail: {
				handler(newVal, oldVal) {
					if (newVal.material_id != oldVal.material_id) {
						this.init();
					}
				},
				immediate: false,
				deep: true
			}
		},
		created() {
	// 		this.startDate = this.today_year_month_day;
	// 		let endDate = new Date(new Date().getTime() + (24 * 60 * 60 * 1000 * 30));
	// 		this.endDate = `${endDate.getFullYear()}` + `-` + `${endDate.getMonth()+1}`.padStart(2, '0') + `-` +
	// `${endDate.getDate()}`.padStart(2, '0');
			this.init();
		},
		filters: {

		},
		computed: {
		},
		methods: {
			bind_date_change(e){
				 this.detail.date = e.detail.value;
				 this.$emit("updata", this.detail);
			},
			init() {
				// this.value = this.detail.purchase_unit_qty;
				this.picker_index = this.picker_array.findIndex(v => this.detail.stock_in_way == v.id);
				// this.msupplier_index = this.msupplier.findIndex(v => this.detail.msupplier_id == v.id);
				this.purchase_unit_index = this.unit.findIndex(v => this.detail.purchase_unit_id == v.value);
				this.set_price();
			},
			bind_need_date_change(e) {
				this.detail.need_date = e.detail.value;
				this.$emit("updata", this.detail);
			},
			bind_purchase_unit_change(e) {
				let value = e.detail.value;
				this.purchase_unit_index = value;
				this.detail.purchase_unit_id = this.unit[value].value;
				this.$emit("updata", this.detail);
			},
			// bind_msupplier_change(e) {
			// 	let value = e.detail.value;
			// 	this.msupplier_index = value;
			// 	this.detail.msupplier_id = this.msupplier[value].id;
			// },
			bind_picker_change(e) {
				let value = e.detail.value;
				this.picker_index = value;
				this.detail.stock_in_way = this.picker_array[value].id;
				this.$emit("updata", this.detail);
			},
			value_input(e) {

			},
			value_blur(e) {
				let name = e.target.dataset.name;
				if ((this.detail[name] + '') != '') {
					let num = Number(this.detail[name]);
					this.detail[name] = num;
					this.$emit("updata", this.detail);
					this.set_price();
				}
			},
			del() {
				this.$emit("del", this.detail);
			},
			close() {
				uni.$u.toast('该功能未启用。');
			},
			set_price(){
				let num = 0;
				let purchase_unit_price = Number(this.detail.purchase_unit_price);
				let purchase_unit_qty = Number(this.detail.purchase_unit_qty);
				if (!purchase_unit_price) {
					return 0;
				}
				if (!purchase_unit_qty) {
					return 0;
				}
				this.price = this.formatPrice(purchase_unit_price * purchase_unit_qty);
			},
			save() {

			},
			value_change() {

			},
			price_change() {

			}
		}

	}
</script>

<style>
	.label-item {
		text-align: right !important;
		width: 200upx;
	}
</style>